<template>
	<view>
		<view class="block">

		</view>
		<view class="QR">
			<view class="title">
				扫描二维码，一起组队
			</view>
			<image :src=qrcode />
			<view class="title font40">
				我的邀请码: <span class="invite-code">{{inviteCode}}</span>
				<button @click="onCopy" class="title">复制邀请码</button>
			</view>
		</view>
		<view class="btn" @tap="printscreen" style="margin-top: 90rpx;">
			保存二维码
		</view>
		<view class="input-box">
			<input type="text" class="input-con" placeholder="输入邀请码" confirm-type="send" @confirm="confirm"
				v-show="isShow" />
		</view>
		<canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus" style="position:fixed;left:100%;"></canvas>
	</view>
</template>

<script>
	import utils from '@/utils/util.js';
	export default {
		data() {
			return {
				showBtn: false,
				qrcode: '',
				inviteCode: '',
				canvasStatus: false, //海报绘图标签
				pid: 0,
			};
		},
		onLoad(options) {
			this.inviteCode = options.inviteCode
			this.pid = options.pid
		},
		onShow() {
			var that = this;
			that.getQrcode();
		},
		computed: {
			isShow() {
				// 这里可以编写逻辑来确定是否需要禁用输入框
				if (this.pid == 0) {
					return true; // 当条件成立时禁用输入框
				} else {
					return false; // 其他情况下取消禁用
				}
			}
		},
		methods: {
			getQrcode() {
				this.$http.get('api/me/poster').then((res) => {
					this.qrcode = "data:image/png;base64," + res.data.src
				})
			},
			confirm(e) {
				this.$http.post('api/me/setPid', {
					invite_code: e.detail.value
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						this.pid = 1 //随便赋值
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}

				})
			},
			onCopy() {

				// 获取要复制的文本内容
				let text = this.inviteCode;

				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: "复制成功"
						})
					},
					fail(err) {
						uni.showToast({
							title: "复制失败"
						})
					}
				});
			},

			// 截图，调用webview、Bitmap方法
			printscreen(e) {
				this.$set(this, 'canvasStatus', true);
				uni.showLoading({
					title: '正在保存...',
					mask: true
				});
				utils.posterImg(this.qrcode, this.inviteCode, function(e) {
					//console.log(e);
					if (e.tempFilePath) {
						uni.hideLoading();
						uni.showToast({
							title: "保存成功"
						})
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f06c7a;
	}

	.block {
		width: 100%;
		height: 30vh;
		background-color: #fff;
		display: flex;
		justify-content: center;

	}

	.QR {
		width: 60vw;
		margin: -40vw auto 0 auto;
		background-color: #fff;
		text-align: center;
		box-sizing: content-box;
		box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.3);
		padding-bottom: 2vw;

		image {
			width: 50vw;
			height: 50vw;
		}
	}

	.title {
		width: 100%;
		height: 10vw;
		font-size: 36upx;
		line-height: 10vw;
		color: #666;
	}

	.btn {
		width: 50%;
		height: 80upx;
		border-radius: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20upx;
		margin: 0 auto;
		background-color: rgb(248, 177, 7);
		color: #fff;
		font-size: 36upx;
	}

	.logo {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 25upx;

		image {
			width: 39.6%;
		}

	}

	.invite-code {
		font-weight: bold;
		color: #fe5636
	}

	.font40 {
		font-size: 40rpx;
	}

	.input-box {
		margin-top: 5vw;
	}

	.input-con {
		text-align: center;
		width: 50%;
		height: 80rpx;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.8);
		color: #666;
		font-size: 36rpx;
	}

	.canvas {
		z-index: -1;
		width: 300px;
		height: 400px;
	}
</style>
